@import '~components/constants.scss';

.channel_category {
  font-size: 12px;
  font-weight: 500;
  color: var(--black-alpha-2);
  margin-top: 24px;
  margin-bottom: 8px;
  margin-left: 12px;
  margin-right: 12px;
  text-transform: uppercase;
  display: flex;

  &.sub {
    margin-top: 8px;
    text-transform: capitalize;
    cursor: pointer;
    .text {
      flex: unset;
    }
    &:hover {
      opacity: 0.8;
      .edit {
        opacity: 1;
      }
    }
    .edit {
      opacity: 0;
    }
  }

  .text {
    flex: 1;
  }

  .add {
    cursor: pointer;
    float: right;
    text-align: center;
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-top: -2px;

    &:hover {
      color: $black;
    }
  }
}

.channel {
  height: 28px;
  width: auto;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: var(--default-border-radius);
  max-width: 216px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 28px;
  background: transparent;
  color: $black;
  display: flex;
  cursor: pointer;
  padding-left: 4px;
  padding-right: 4px;
  line-height: normal;

  .user_list {
    margin-top: 2px;
  }

  .more-icon {
    display: none;
  }

  &:hover {
    .more-icon {
      display: inline-block;
      &:hover {
        color: $black;
      }
    }
  }

  &.extra-margin {
    padding-left: 6px;
  }

  &.has_new_content {
    font-weight: 700;
  }

  &:hover {
    background: $grey_light;

    .user_head,
    .user_head .status {
      border-color: $grey_light;
    }
  }

  &.selected {
    background: $primary;
    color: $white;

    .user_head,
    .user_head .status {
      border-color: $primary;
    }
    .user_head .status.grey {
      background-color: $grey_background;
    }

    .black-icon {
      color: $white;
    }
    .grey-icon {
      color: $grey_light !important;
    }
    .more-icon {
      &:hover {
        color: $white;
      }
    }

    .icon .icon-unicon {
      color: $white;
    }
  }

  &.muted {
    .text,
    .more {
      opacity: 0.6;
    }
  }

  .group_count {
    background: var(--black-alpha-1);
    height: 16px;
    color: var(--white);
    margin-right: 8px;
    border-radius: var(--default-border-radius);
    padding: 2px 4px;
    box-sizing: border-box;
    line-height: 12px;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 6px;
  }
  .app_indicator {
    background: #92929c;
    height: 16px;
    color: #fff;
    margin-right: 4px;
    border-radius: var(--default-border-radius);
    padding: 2px 3px;
    font-weight: 700;
    box-sizing: border-box;
    line-height: 12px;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 8px;
  }

  .imported {
    font-weight: 700;
    font-size: 12px;
    line-height: 32px;
    margin-right: 4px;
  }

  .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    padding-right: 4px;
    line-height: 28px;
  }

  .not_member {
    margin-left: -6px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: auto;
    .icon-unicon {
      opacity: 0.5;
      line-height: 32px;
    }
  }

  .favorite {
    margin-right: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: auto;
    opacity: 0.5;
    line-height: 32px;
  }

  .more {
    display: flex;
    align-items: center;
    font-size: 16px;

    .merge-icon {
      margin-left: -5px;
    }

    .grey-icon {
      color: $grey_dark;
    }
    .green-icon {
      color: $green;
    }
  }

  .icon {
    display: flex;
    align-items: center;
    padding-right: 8px;
    font-size: 16px;

    .icon-unicon {
      color: $grey_dark;
    }

    img.emojione {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-top: -2px;
    }
    i.emojione.emoji-image {
      margin-top: 0px;
      border-radius: var(--default-border-radius);
    }

    .user_list {
      & > div {
        display: inline-block;
        margin-left: -14px;
      }
      & > div:first-child {
        margin-left: 0px;
      }
    }
  }

  .notification_dot {
    min-width: 16px;
    height: 16px;
    color: $white;
    background: $red;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 16px;
    border-radius: var(--default-border-radius-large);
    margin: 8px 4px;
    padding: 0 2px;
    vertical-align: top;
    box-sizing: border-box;
    display: inline-block;
  }
}
.drag_channel {
  .channel {
    pointer-events: none;
  }
}

/** Channel drop zones **/

.channel_dropzone {
  margin-left: 12px;
  margin-right: 12px;
  width: auto;
  height: 0px;
  background: $grey_light;
  border: 0px;
  border-radius: var(--default-border-radius);
  box-sizing: border-box;
  text-align: center;
  line-height: 28px;
  font-size: 12px;
  color: $grey_dark;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: height 0.2s, margin 0.2s, opacity 0.2s, border 0.2s;

  .icon {
    width: 32px;
    font-size: 16px;
    height: 28px;
    vertical-align: top;
    line-height: 26px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .text {
    flex: 1;
    padding-right: 32px;
  }
}
.drag_channel {
  .channel_dropzone {
    pointer-events: all;
    height: 32px;
    opacity: 1;
    margin-bottom: 16px;
    display: flex;
    border: 2px dashed transparent;
    &:hover {
      border: 2px dashed #979797;
    }
  }
}

/** loading and misc **/

.dragging_channel_view {
  .channel {
    pointer-events: none;
    transition: background 0.2s, box-shadow 0.2s;
    background: $white;
    margin: 0px;
    width: 188px;
    opacity: 1;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 8px 20px 0 rgba(0, 0, 0, 0.15);
  }
  .channel.selected {
    background: $primary;
  }
}

.loading_render {
  .channel {
    pointer-events: none;
    border-radius: var(--default-border-radius-large);
    height: 16px;
    margin-bottom: 16px;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: $grey_light;
    background: linear-gradient(to right, $grey_light 8%, #f2f2f2 18%, $grey_light 33%);
    background-size: 800px 104px;

    & > * {
      opacity: 0 !important;
    }
  }
  .channel_category {
    pointer-events: none;
    font-size: 0;
    height: 16px;
    background: #dfdfdf;
    border-radius: var(--default-border-radius-large);
    width: 60%;
    margin-top: 30px;
    margin-bottom: 16px;

    & > * {
      opacity: 0 !important;
    }
  }
}
